<% collection_size = articles.size %>
<% slugs = articles.pluck(:slug) %>

<% if collection && collection_size > 1 %>
  <nav class="series-switcher crayons-card crayons-card--secondary">
    <header class="crayons-card__header">
      <h2 class="crayons-subtitle-2">
        <%= collection_link(collection) %>
      </h2>
    </header>

    <div class="series-switcher__list">
      <% articles.each_with_index do |article, i| %>
        <% if collection_size > 5 && i == 2 %>
            <a
              href="<%= article.path %>"
              class="crayons-link crayons-link--contentful series-switcher__link <%= "series-switcher__link--active" if slugs[2..collection_size - 3].include?(rendered_article.slug) %> series-switcher__link--inbetween"
              data-preload-image="<%= cloud_cover_url(article.main_image) %>"
              id="collection-link-inbetween"
              data-no-instant
              title="<%= t("views.articles.series.inbetween.title") %>">
              <span class="series-switcher__num"><%= t("views.articles.series.inbetween.num") %></span>
              <span class="series-switcher__title"><%= t("views.articles.series.inbetween.text", count: collection_size - 4) %></span>
            </a>
        <% end %>

          <a
            href="<%= article.path %>"
            class="crayons-link crayons-link--contentful series-switcher__link <%= "series-switcher__link--active" if rendered_article.id == article.id %> <%= "series-switcher__link--hidden" if collection_size > 5 && (i > 1 && i < collection_size - 2) %>"
            data-preload-image="<%= cloud_cover_url(article.main_image) %>"
            title="<%= t("views.articles.series.published", date: article.readable_publish_date) %>">
            <span class="series-switcher__num"><%= i + 1 %></span>
            <span class="series-switcher__title"><%= article.title %></span>
          </a>
      <% end %>
    </div>
  </nav>
<% end %>
